<template>
	<view>
		<order-info :order="order"></order-info>
		<view class="item">
			<view style="display: inline-flex; justify-content: flex-end;">
				<text class="title">
					租金明细:
				</text>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view class="text-line" v-for="(item, index) in rent" :key="index">
				<text class="text-name">{{item.chargeProjectName}}:</text>
				<text class="text-value">{{item.chargeMoney}}元</text>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view class="text-line" style="text-align: end;display: block;">
				<text class="text-name">合计:</text>
				<text class="text-value">{{rentTotal.chargeMoney}}元</text>
			</view>
		</view>
		<view class="item">
			<u--form  label-width="100" labelPosition="left"  ref="uForm">
				<view style="display: inline-flex; justify-content: flex-end;">
					<text class="title">
						收款凭证 {{receiptVoucher.length||0}}/1:
					</text>
				</view>
				<view class="text-line">
					<sr-upload maxCount="1" @uploadResult="receiptVoucherChange"></sr-upload>
				</view>
				<view>
					<button type="primary" style="background-color: #1573ff;color: #fff;" @click="submitForm">保&nbsp;&nbsp;存</button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import orderInfo from './component/orderInfo.vue';
	import * as api from '@/api/order-api.js';
	export default {
		components: {
			srUpload,
			orderInfo
		},
		data() {
			return {
				order: {},
				rent: [],
				receiptVoucher:[],
				loading: true,
				rentTotal:{}
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.costDetail();
		},
		methods: {
			submitForm(){
				if(!this.receiptVoucher||!this.receiptVoucher[0]){
					this.$u.toast('请上传支付凭证')
					return
				}
				uni.showLoading({
					title:"提交中...",
					mask:true
				});
				api.addVoucher({
					bizType: 1,
					bizId: this.order.orderNo, // 订单编号
					url: this.receiptVoucher[0], // 支付凭证
				}).then(r=>{
					api.chargeRent(this.order.orderNo,r.data.id).then((res) => {
					  uni.hideLoading();
					  this.$u.toast('收款成功')
					  uni.$emit("refreshOrder");
					  uni.navigateBack({
					  	animationDuration:300
					  })
					})
				})
				
			},
			receiptVoucherChange(data) {
				this.receiptVoucher = data
			},
			costDetail() {
				api.costDetail(this.order.orderNo).then(response => {
					this.rent = response.data.chargingItems.filter(item => {
						return item.type == 1;
					});
					this.rentTotal=response.data.chargingItems.filter(item => {
						return item.chargeProjectName == '合计';
					})[0];
					this.loading = false
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 20rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.flex-item {
		flex: 1
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #f59a23;

		.type-tag {
			background-color: #f59a23;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	.start-time {
		color: #e65a6b;

		.type-tag {
			background-color: #e65a6b;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}
</style>
